﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Animation.aspx.cs" Inherits="ControlExplorer.C1Expander.Animation" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Expander"
	TagPrefix="C1Expander" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			jQuery.wijmo.wijexpander.animations.custom1 = function (options) {
				this.slide(options, {
					easing: "easeOutExpo",
					duration: 900
				});
			}
			jQuery.wijmo.wijexpander.animations.custom2 = function (options) {
				if (options.expand)
					options.content.show("puff", options, 300);
				else
					options.content.hide("explode", options, 300);
			}
		});
	</script>
	<h4>
		默认的扩展动画</h4>

	<C1Expander:C1Expander runat="server" ID="C1Expander1">
		<Header>
			头部
		</Header>
		<Content>
			Wijmo Expander控件提供了展开和折叠内容面板的功能，并且支持动画显示效果。
		</Content>
	</C1Expander:C1Expander>
	<br />
	<h4>
		定制扩展动画</h4>
	<C1Expander:C1Expander runat="server" ID="C1Expander2" Animated-Effect="custom1" Expanded="false">
		<Header>
			头部
		</Header>
		<Content>
			Wijmo Expander控件提供了展开和折叠内容面板的功能，并且支持动画显示效果。
		</Content>
	</C1Expander:C1Expander>

	<br />
	<h4>
		使用jQuery效果定制动画</h4>
	<C1Expander:C1Expander runat="server" ID="C1Expander3" Animated-Effect="custom2" Expanded="false">
		<Header>
			头部
		</Header>
		<Content>
			Wijmo Expander控件提供了展开和折叠内容面板的功能，并且支持动画显示效果。
		</Content>
	</C1Expander:C1Expander>
	
	<br />
	<h4>
		禁用动画</h4>
	<C1Expander:C1Expander runat="server" ID="C1Expander4" Animated-Disabled="true" Expanded="false">
		<Header>
			头部
		</Header>
		<Content>
			Wijmo Expander控件提供了展开和折叠内容面板的功能，并且支持动画显示效果。
		</Content>
	</C1Expander:C1Expander>

	
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
	<p>
		此示例展示了如何使用不同的动画效果。
        <strong>Animated </strong>属性可以被用来改变动画效果。</p>
    <p>
		以下扩展动画演示：</p>
    <ul>
        <li>第一个扩展动画展示了默认的扩展/收缩的动画效果。</li>
        <li>第二个动画展示了用"easeOutExpo"缓和度和900毫秒的持续时间来定制动画。 </li>
        <li>第三个动画展示了使用jQuery效果来定制动画。 
		 "puff"作为打开时的效果，"explode" 作为关闭时的效果
	    </li>
        <li>第四个动画效果被禁止了
		<strong>The Animated.Disabled</strong> 属性设置为True </li>
    </ul>
	以下为定制1和定制2动画的代码实现:
<pre class="controldescription-code">
	&lt;script id="script1" type="text/javascript"&gt;
		$(document).ready(function () {
			jQuery.wijmo.wijexpander.animations.custom1 = function (options) {
				this.slide(options, {
					easing: "easeOutExpo",
					duration: 900
				});
			}
			jQuery.wijmo.wijexpander.animations.custom2 = function (options) {
				if (options.expand)
					options.content.show("puff", options, 300);
				else
					options.content.hide("explode", options, 300);
			}
		});
	&lt;/script&gt;
</pre>

		动画功能可能用到下列选项（选项参数）：
		<ul>
			<li><strong>expand </strong>- 如果为True, 展开内容元素。</li>
			<li><strong>horizontal </strong>- 如果为True, 则向水平方向扩展 (当 
                <strong>expandDirection</strong> 为left或者right时)。</li>
			<li><strong>content </strong>- jQuery对象所包含的内容元素被展开或折叠。 </li>
		</ul>
	
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
